<template>
  <div class="an-richText">
    <quill-editor
      class="quill-editor"
      :class="active?'ql-toolbar--active':''"
      :id="id"
      v-model="content"
      :ref="'QuillEditor' + id"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @click.native="onEditorClick"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = ["14px", "18px", "24px", "28px", "32px", "36px"];
Quill.register(fontSizeStyle, true);

// 设置字体样式
const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
// 客户提供的字体文件勿动 2022/7/19
const fonts = ["仿宋", "方正小标宋简", "simhei", "simkai"];
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);
export default {
  components: {
    quillEditor
  },
  props: {
    value: {
      // 传入的原始数据
      type: String,
      default: ""
    },
    placeholder: {
      // 传入的占位符
      type: String,
      default: "请输入..."
    },
    maxlength: {
      type: [Number, String],
      default: 3000
    },
    // 是否开启转码
    transcoding: {
      type: Boolean,
      default: true
    },
    // 是否只读
    readonly: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      id: "quill-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""),
      content: ``, //双向数据绑定数据
      valueLength: 0, // 已输入字符长度
      editorOption: {
        //编辑器配置项
        modules: {
          toolbar: [
            //[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            //["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            //[{ list: "ordered" }, { list: "bullet" }], //列表
            //[{ script: "sub" }, { script: "super" }], // 上下标
            //[{ indent: "-1" }, { indent: "+1" }], // 缩进
            //[{ direction: "rtl" }], // 文本方向
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], //对齐方式
            [{ size: fontSizeStyle.whitelist }], // 字体大小
            [{ font: fonts }] //字体
            //["clean"], //清除字体样式
          ]
        },
        placeholder: this.placeholder
      },
      active: false
    };
  },
  mounted() {
    this.init();
    this.maxWindow();
  },
  watch: {
    value: {
      handler(nd, od) {
        if (nd && nd !== od) {
          // 是否开启转码
          if (this.transcoding) {
            this.$nextTick(() => {
              this.content = decodeURIComponent(
                nd.replace(/%(?!\d|[ABCDEF]+)/g, "%25")
              );
            });
          } else {
            this.content = nd;
          }
        } else {
          this.content = "";
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      // 如果设置了最大长度
      if (this.maxlength) {
        this.$nextTick(() => {
          // 给富文本右下角添加计数功能
          const el = this.$refs["QuillEditor" + this.id].$el;
          let dom = document.createElement("span");
          dom.className = "hu-number";
          dom.innerHTML = `${this.valueLength}/${this.maxlength}`;
          el.appendChild(dom);
        });
      }
      // 1. 初始化时令vue-quill-editor失效
      this.$refs["QuillEditor" + this.id].quill.enable(false);
    },
    // 2. 点击富文本框时令quill-editor生效，并聚焦
    onEditorClick() {
      this.$refs["QuillEditor" + this.id].quill.enable(true);
      this.$refs["QuillEditor" + this.id].quill.focus();
    },
    onEditorBlur() {
      this.active = false;
    }, // 失去焦点触发事件

    // 获得焦点触发事件
    onEditorFocus(event) {
      this.active = true;
      if (this.disabled) {
        event.enable(false);
      }
    },
    // 正则匹配 <p> </p> 空标签
    isRichTextEmpit(s) {
      let re = /^(<p>)(\s*)(<\/p>)/;
      return re.test(s);
    },

    // 内容改变触发事件
    onEditorChange(event) {
      if (this.disabled) {
        event.quill.enable(false);
      }
      // 如果是 <p> </p> 空标签 就清空内容
      if (this.isRichTextEmpit(this.content)) {
        this.content = "";
      }
      // 是否开启转码 并且不为空
      if (this.transcoding && this.content != "") {
        this.$emit("input", encodeURIComponent(this.content));
      } else {
        this.$emit("input", this.content);
      }
      const el = this.$refs["QuillEditor" + this.id];
      let qlCount = el.$el.querySelector(".hu-number");

      // 如果设置了最大长度
      if (this.maxlength) {
        // 右下角显示输入的字符长度
        if (this.content === "") {
          this.valueLength = 0;
        } else {
          this.valueLength = event.quill.getLength() - 1;
        }
        qlCount.innerHTML = `${this.valueLength}/${this.maxlength}`;
        // 限制输入最长字符
        event.quill.deleteText(this.maxlength, 1, this.content);
      }
    },

    // 添加全屏功能
    maxWindow() {
      const domList = [
        {
          dom: `<svg  t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1"  p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`,
          tit: "最大化",
          id: "maxId",
          display: "block"
        },
        {
          dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1"  p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`,
          tit: "还原",
          id: "minId",
          display: "none"
        }
      ];

      this.$nextTick(() => {
        const el = this.$refs["QuillEditor" + this.id].$el;
        let dialogHeaderEl = el.querySelector(".ql-toolbar");

        domList.map(item => {
          let dom = document.createElement("span");

          dom.className = "ql-formats";

          dom.innerHTML = `<button title="${item.tit}" style="display:${
            item.display
          }" id="${item.id +
            this.id}" type="button" class="ql-clean ql-maxId">${
            item.dom
          }</button>`;

          dialogHeaderEl.appendChild(dom);

          //dialogHeaderEl.insertBefore(dom, dialogHeaderEl.childNodes[4]);
        });

        let maxId = document.getElementById("maxId" + this.id);
        let minId = document.getElementById("minId" + this.id);
        //最大化
        maxId.onclick = () => {
          el.style.width = 100 + "vw";
          el.style.height = 100 + "vh";
          el.style.position = "fixed";
          el.style.top = 0;
          el.style.left = 0;
          el.style.zIndex = 9999;
          el.style.background = "white";
          maxId.style.display = "none";
          minId.style.display = "block";
        };
        //最小化
        minId.onclick = () => {
          el.style = "";
          maxId.style.display = "block";
          minId.style.display = "none";
        };
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/components/formGenerator/styles/generator.scss";

.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #dcdfe6;
}
.ql-toolbar.ql-snow {
  border-radius: 4px 4px 0 0;
}
.ql-container.ql-snow {
  border-radius: 0 0 4px 4px;
}
// .ql-toolbar--active {
//   .ql-toolbar.ql-snow,
//   .ql-container.ql-snow {
//     border-color: $themeColor;
//   }
// }
.quill-editor {
  position: relative;
}
.hu-number {
  color: #909399;
  text-align: right;
  position: absolute;
  font-size: 12px;
  bottom: -1px;
  right: 8px;
}
.ql-snow {
  position: relative;
  .ql-size,
  .ql-font {
    .ql-picker-label::before {
      top: 0;
      position: absolute;
    }
  }
  .ql-maxId {
    position: absolute;
    top: 15px;
    right: 10px;
  }
}
// 给表单中验证不通过的富文本边框变为红色
.el-form-item.is-error .an-richText {
  .ql-toolbar.ql-snow {
    border-color: #f56c6c;
  }
  .ql-container.ql-snow {
    border-color: #f56c6c;
  }
}
</style>

<style lang="scss">
.an-richText {
  .quill-editor {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ql-editor {
    min-height: 150px;
    padding: 12px 15px;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
  }
}

.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-align .ql-picker-label {
  display: block;
  padding: 3px 5px;
  position: relative;
}
.ql-snow .ql-color-picker .ql-picker-label > svg,
.ql-snow .ql-align .ql-picker-label > svg {
  position: absolute;
  top: 2px;
  width: 18px;
  height: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
  content: "38px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
  content: "40px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
  content: "45px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
  content: "50px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "标题";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="方正小标宋简"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="方正小标宋简"]::before {
  content: "方正小标宋简";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="仿宋"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="仿宋"]::before {
  content: "仿宋";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="simhei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="simhei"]::before {
  content: "黑体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="simkai"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="simkai"]::before {
  content: "楷体";
}
</style>
